import React from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './login.less'
import {connect} from 'react-redux'
import {loginAsync} from '../../actions/user'
import {Redirect} from 'react-router-dom'

// 需要将当前组件连接到 redux 的 store
// 用到 connect 方法,具体看最下面    ↓↓↓↓

function Login (props) {
  // 表单验证成功，触发提交表单的 onFinish 事件
  const onFinish = (values) => {
    console.log('提交的数据: ', values);
    props.login(values)
  };

  return (
    props.token // 判断,在属性中是否存在用户登录成功的 token 数据，如果存在，则跳转到管理主页面中
    ?
    <Redirect to='/admin' />
    :
    <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        username: 'admin',
        password: 'admin',
        remember: true }}
      onFinish={onFinish}
      style={{margin:'auto',
      padding: '10px'}}
      layout="vertical"
    >
      <Form.Item
        label="用户名"
        name="username"
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入密码"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住我</Checkbox>
        </Form.Item>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

// 将当前组件连接到 redux 的 store
// mapStateToPtops 是一个函数，接收一个 state 作为参数，返回一个对象，返回的对象 与 state 做合并
export default connect(state => ({
  token: state.user.token
}),{
  login: loginAsync
})(Login)
